import classNames from 'classnames/bind'
import styles from './index.module.less'
import type Store from '../../store'
import { useLayoutEffect } from 'react'

type Props = Pick<Store, 'no' | 'switchQuestion'> & {
    questionList: { no: number; answered: boolean }[]
}

const cx = classNames.bind(styles)

export const NoPicker = (props: Props) => {
    useLayoutEffect(() => {
        document
            .getElementById(`picker_no_${props.no}`)
            ?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
    }, [props.no])

    return (
        <div className={styles.pickerBox}>
            {props.questionList.map(item => {
                const styleChecked = props.no === item.no
                const styleAnswered = item.answered && props.no !== item.no
                return (
                    <div
                        key={item.no}
                        id={`picker_no_${item.no}`}
                        onClick={() => {
                            props.switchQuestion(item.no)
                        }}
                        className={cx('noBox', {
                            noBox_answered: styleAnswered,
                            noBox_checked: styleChecked,
                        })}
                    >
                        {item.no + 1}
                    </div>
                )
            })}
        </div>
    )
}
